<html>
    <head>
        <script src="/labs/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p>{{message}}</p>
            <!--Vue还提供了 v-model指令，可以轻松实现"表单组件"和"应用状态"之间的"双向绑定" -->
            <input v-model="message" type="text">
        </div>
        <script>
            var app = new Vue({
                el:'#app',
                data:{ // 这个就是被称为"应用状态"数据
                    message:'Hello Vue.js'
                },
                methods:{
                    reverseMessage:()=>{
                        this.message =this.message.split('').reverse().join('');
                    }
                }
                /*
                    注意：在reverseMessage方法中，我们更新了应用的状态，单没有触碰ＤＯＭ----
                          所有的DOM操作都由Vue来处理，你编写的代码只需要关注累计层面即可。
                */
            });
        </script>
    </body>
</html>